<!-- 视频管理 -->

<template>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
        <a-breadcrumb-item>admin</a-breadcrumb-item>
        <a-breadcrumb-item>视频管理</a-breadcrumb-item>
    </a-breadcrumb>

    <div style="margin: 15px 0;">
        <!-- 视频类型选择 -->
        <a-form-item label="请选择类型">
            <a-select v-model="videoCate" @change="videoCateOnSelected" :style="{width:'120px'}" placeholder="选择分类">
                <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
            </a-select>
        </a-form-item>
        <!-- 数据表格 -->
        <div style="max-height: 620px;">
            <a-table column-resizable :columns="tableColumns" :hoverable="true" :stripe="true" :data="videoList"
                :scroll="{x: '120%', y: '100%'}">
                <template #operate="{ record }">
                    <a-button size="small" type="primary" @click="showCommentForm(record)">点评</a-button>
                    <a-button size="small" status="success" @click="showEditForm(record)" style="margin-left: 5px;">编辑
                    </a-button>
                    <a-popconfirm content="确定删除吗?" type="warning" @ok="deleteVideo(record.id)">
                        <a-button size="small" status="danger" style="margin-left: 5px;">删除</a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>

        <!-- 添加按钮 -->
        <div style="margin: 10px 0;">
            <a-button type="primary" @click="showAddForm">
                <template #icon>
                    <icon-plus />
                </template>
                <template #default>添加</template>
            </a-button>
        </div>
    </div>

    <!-- 弹出点评表单 -->
    <a-modal title="点评" v-model:visible="commentFormIsShow" @cancel="commentFormCancel" @ok="commentFormOk">
        <a-row>
            <a-form-item label="点评：">
                <a-input v-model="newComment" />
            </a-form-item>
        </a-row>
    </a-modal>

    <!-- 弹出添加/编辑表单 -->
    <a-modal :mask-closable="false" width="50%" :title="addFormTitle" :body-style="{ maxHeight: '500px', }"
        v-model:visible="addFormIsShow" @cancel="addFormCancel" @ok="addFormOk">
        <a-form :model="addVideoFormData">
            <a-form-item field="name" label="名称">
                <a-input v-model="addVideoFormData.name" />
            </a-form-item>
            <a-form-item field="url" label="url">
                <a-input v-model="addVideoFormData.url" />
            </a-form-item>
            <a-form-item field="img" label="图片">
                <a-input v-model="addVideoFormData.img" />
            </a-form-item>
            <a-form-item field="category" label="类型">
                <a-input v-model="addVideoFormData.category" />
            </a-form-item>
            <a-form-item field="region" label="地区">
                <a-input v-model="addVideoFormData.region" />
            </a-form-item>
            <a-form-item field="year" label="年份">
                <a-input-number :default-value="2000" :step="1" :max="2035" :min="1992" allow-clear
                    v-model="addVideoFormData.year" />
            </a-form-item>
            <a-form-item field="actors" label="主演">
                <a-input v-model="addVideoFormData.actors" />
            </a-form-item>
            <a-form-item field="director" label="导演">
                <a-input v-model="addVideoFormData.director" />
            </a-form-item>
            <a-form-item field="intro" label="简介">
                <a-textarea v-model="addVideoFormData.intro" placeholder="请输入视频简介" auto-size allow-clear />
            </a-form-item>
            <a-form-item field="comment" label="点评">
                <a-input v-model="addVideoFormData.comment" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
    import { ref, } from 'vue';
    import { IconPlus, } from '@arco-design/web-vue/es/icon';
    import { Message } from '@arco-design/web-vue';
    import { getAllTeleplay, doTeleplayComment, addTeleplay, editTeleplay, deleteTeleplay } from '../../api/teleplay';
    import { getAllMovie, doMovieComment, addMovie, editMovie, deleteMovie } from '../../api/movie';
    import { getAllAnimation, doAnimationComment, addAnimation, editAnimation, deleteAnimation } from '../../api/animation';


    export default {
        components: {
            IconPlus,
        },
        setup() {
            // 表格列定义
            const tableColumns = ref([
                {
                    title: 'Id',
                    dataIndex: 'id',
                    width: 80,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    title: '名称',
                    dataIndex: 'name',
                },
                {
                    title: '地址',
                    dataIndex: 'url',
                    width: 80,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    title: '图片',
                    dataIndex: 'img',
                    width: 80,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    title: '类型',
                    dataIndex: 'category',
                },
                {
                    title: '地区',
                    dataIndex: 'region',
                },
                {
                    title: '年份',
                    dataIndex: 'year',
                },
                {
                    title: '主演',
                    dataIndex: 'actors',
                    width: 120,
                    ellipsis: true,
                    tooltip: true,
                },
                {
                    title: '导演',
                    dataIndex: 'director',
                },
                {
                    title: '点评',
                    dataIndex: 'comment',
                },
                {
                    title: '操作',
                    slotName: 'operate',
                    fixed: 'right',
                    width: 230,
                }
            ]);

            // 视频分类
            const cateList = ref([
                { id: '电视剧', name: '电视剧' },
                { id: '电影', name: '电影' },
                { id: '动漫', name: '动漫' },
            ]);

            // 选中的视频分类
            let videoCate = ref('');

            // 视频列表数据
            const videoList = ref([]);

            // 分类选择框选择事件
            const videoCateOnSelected = (cate) => {
                switch (cate) {
                    case '电视剧':
                        getTeleplays();
                        break;
                    case '电影':
                        getMovies();
                        break;
                    case '动漫':
                        getAnimations();
                        break;

                    default:
                        break;
                }
            };

            // 获取电视剧数据
            const getTeleplays = () => {
                getAllTeleplay(true)
                    .then(res => {
                        if (res.code != 200) {
                            Message.error('数据加载失败');
                            return;
                        }
                        videoList.value = res.data;
                    }).catch(err => console.log(err));
            };

            // 获取电影数据
            const getMovies = () => {
                getAllMovie(true)
                    .then(res => {
                        if (res.code != 200) {
                            Message.error('数据加载失败');
                            return;
                        }
                        videoList.value = res.data;
                    }).catch(err => console.log(err));
            };

            // 获取动漫数据
            const getAnimations = () => {
                getAllAnimation(true)
                    .then(res => {
                        if (res.code != 200) {
                            Message.error('数据加载失败');
                            return;
                        }
                        videoList.value = res.data;
                    }).catch(err => console.log(err));
            };

            // 点评表单是否显示
            const commentFormIsShow = ref(false);

            // 视频id
            const vid = ref('');

            // 新评语
            const newComment = ref('');

            // 显示点评表单
            const showCommentForm = (record) => {
                vid.value = record.id;
                newComment.value = record.comment;
                commentFormIsShow.value = true;
            }

            // 取消点评表单
            const commentFormCancel = () => {
                newComment.value = '';
                vid.value = '';
                commentFormIsShow.value = false;
            }

            // 提交点评
            const commentFormOk = () => {
                switch (videoCate.value) {
                    case '电视剧':
                        doTeleplayComment(vid.value, { comment: newComment.value })
                            .then(res => {
                                if (res.code != 200) {
                                    Message.error(`操作失败: ${res.msg}`);
                                    return;
                                }
                                newComment.value = '';
                                commentFormIsShow.value = false;
                                Message.success('操作成功');
                                // 重新加载数据
                                getTeleplays();
                            }).catch(err => console.log(err));
                        break;
                    case '电影':
                        doMovieComment(vid.value, { comment: newComment.value })
                            .then(res => {
                                if (res.code != 200) {
                                    Message.error(`操作失败: ${res.msg}`);
                                    return;
                                }
                                newComment.value = '';
                                commentFormIsShow.value = false;
                                Message.success('操作成功');
                                // 重新加载数据
                                getMovies();
                            }).catch(err => console.log(err));
                        break;
                    case '动漫':
                        doAnimationComment(vid.value, { comment: newComment.value })
                            .then(res => {
                                if (res.code != 200) {
                                    Message.error(`操作失败: ${res.msg}`);
                                    return;
                                }
                                newComment.value = '';
                                commentFormIsShow.value = false;
                                Message.success('操作成功');
                                // 重新加载数据
                                getAnimations();
                            }).catch(err => console.log(err));
                        break;
                    default:
                        break;
                }
            }

            // 是否显示添加/编辑表单
            const addFormIsShow = ref(false);

            // 表单标题
            const addFormTitle = ref('添加视频');

            // 表单数据存储
            const addVideoFormData = ref({
                name: '',
                url: '',
                img: '',
                category: '',
                region: '',
                year: 0,
                actors: '',
                director: '',
                intro: '',
                comment: '',
            });

            // 显示添加视频表单
            const showAddForm = () => {
                addFormTitle.value = '添加视频';
                addFormIsShow.value = true;
            };

            // 提交添加/编辑视频
            const addFormOk = () => {
                switch (videoCate.value) {
                    case '电视剧':
                        if (isEdit.value) {    // 编辑视频
                            editTeleplay(vid.value, addVideoFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                // 重新加载数据
                                getTeleplays();
                                Message.success('操作成功');
                            }).catch(err => console.log(err));
                        } else {    // 添加视频
                            addTeleplay(addVideoFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                // 重新加载数据
                                getTeleplays();
                                Message.success('操作成功');
                            }).catch(err => console.log(err));
                        }
                        break;

                    case '电影':
                        if (isEdit.value) {    // 编辑视频
                            editMovie(vid.value, addVideoFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                // 重新加载数据
                                getMovies();
                                Message.success('操作成功');
                            }).catch(err => console.log(err));
                        } else {    // 添加视频
                            addMovie(addVideoFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                // 重新加载数据
                                getMovies();
                                Message.success('操作成功');
                            }).catch(err => console.log(err));
                        }
                        break;

                    case '动漫':
                        if (isEdit.value) {    // 编辑视频
                            editAnimation(vid.value, addVideoFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                // 重新加载数据
                                getAnimations();
                                Message.success('操作成功');
                            }).catch(err => console.log(err));
                        } else {    // 添加视频
                            addAnimation(addVideoFormData.value).then(res => {
                                if (res.code != 200) {
                                    Message.error('操作失败');
                                    return;
                                }
                                // 重新加载数据
                                getAnimations();
                                Message.success('操作成功');
                            }).catch(err => console.log(err));
                        }
                        break;

                    default:
                        break;
                }



                isEdit.value = false;
                vid.value = '';
                addVideoFormData.value = {};
                addFormIsShow.value = false;
            };

            // 取消添加视频
            const addFormCancel = () => {
                isEdit.value = false;
                vid.value = '';
                addVideoFormData.value = {};
                addFormIsShow.value = false;
            };

            // 是否为编辑
            const isEdit = ref(false);

            // 显示编辑表单
            const showEditForm = (record) => {
                addFormTitle.value = '编辑视频';
                isEdit.value = true;
                vid.value = record.id;
                addVideoFormData.value = record;
                addFormIsShow.value = true;
            };

            // 删除视频
            const deleteVideo = (id) => {
                switch (videoCate.value) {
                    case '电视剧':
                        deleteTeleplay(id).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getTeleplays();
                            Message.success('删除成功');
                        }).catch(err => console.log(err));
                        break;
                    case '电影':
                        deleteMovie(id).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getMovies();
                            Message.success('删除成功');
                        }).catch(err => console.log(err));
                        break;
                    case '动漫':
                        deleteAnimation(id).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getAnimations();
                            Message.success('删除成功');
                        }).catch(err => console.log(err));
                        break;

                    default:
                        break;
                }
            };


            return {
                tableColumns,
                cateList,
                videoCate,
                videoList,
                addFormIsShow,
                addFormTitle,
                addVideoFormData,
                commentFormIsShow,
                newComment,

                showCommentForm,
                commentFormCancel,
                commentFormOk,

                videoCateOnSelected,
                showAddForm,
                addFormOk,
                addFormCancel,
                showEditForm,
                deleteVideo,

            }

        }
    }

</script>